<template>
    <div class="navbar">
        <div class="links">
                <a href="/">Home</a>
                <a href="/knowledge">AI application</a>
                <a href="/courses">AI writing</a>
                <a href="/training">AI programming</a>
                <a href="/about">AI mapping</a>
                <a href="/about">AI training model</a>
                <a href="/about">AI video editing</a>
                <a href="/about">AI Efficiency Assistant</a>
                <a href="/about">Contact me</a>
        </div>
        <el-button type="text" @click="centerDialogVisible = true" class="mobile-menu-button">菜单</el-button>
        <!-- <button id="myBtn" @click="toggleMobileMenu" class="mobile-menu-button">菜单</button> -->
        <el-dialog :visible.sync="centerDialogVisible" width="50%" center>
            <span slot="footer" class="dialog-footer">
                <p><a href="/">Home</a></p>
                <p><a href="/knowledge">AI application</a></p>
                <p><a href="/courses">AI writing</a></p>
                <p><a href="/training">AI programming</a></p>
                <p><a href="/about">AI mapping</a></p>
                <p><a href="/about">AI training model</a></p>
                <p><a href="/about">AI video editing</a></p>
                <p><a href="/about">AI Efficiency Assistant</a></p>
                <p><a href="/about">Contact me</a></p>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';

export default {
    name: "Header",
    data() {
        return {
            isNavOpen: false,
            showMobileMenu: false,
            centerDialogVisible: false
        }
    },
    methods: {
        handleClick(event) {
        },
        toHome() {
            this.$router.push("/home");
        },
        toggleMobileMenu() {
            this.showMobileMenu = !this.showMobileMenu;
            // 获取弹窗
            var modal = document.getElementById('myModal');
            modal.style.display = "block";

            // 点击 <span> (x), 关闭弹窗
            span.onclick = function () {
                modal.style.display = "none";
            }

            // 在用户点击其他地方时，关闭弹窗
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }

        }
    },

    components: { RouterLink }
}
</script>

<style scoped>
.el-dialog--center {
    text-align: center;
    line-height: 47px;
}

.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    background: #FFF;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-sizing: border-box;
    width: 50%;
}

.mobile-menu {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    /* 固定定位 */
    /* z-index: 1; 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #393D49;
    color: white;
    padding: 23px 0px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.links a {
    text-decoration: none;
    margin: 0 -4px;
    color: white;
    font-weight: 700
}

.mobile-menu-button {
    display: none;
    /* 隐藏按钮，将在媒体查询中显示 */
}

@media (max-width: 768px) {
    .links {
        display: none;
        /* 隐藏链接 */
    }

    .mobile-menu-button {
        display: block;
        /* 显示按钮 */
    }
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 63px;
    background-color: #FFFFFF;
    color: #ffffff;

    /*吸顶效果*/
    position: sticky;
    /* position: -webkit-sticky;    !*兼容 -webkit 内核的浏览器*! */
    top: 0px;
    /*!*必须设一个值，否则不生效*! */

}

.box {
    display: flex;
    align-items: center;
}

.images {
    width: 100%;
}

h1 {
    display: flex;
    align-items: center;
    font: normal 28px Cookie, Arial, Helvetica, sans-serif;
    padding: 0px 20px;
}

img {
    height: 40px;
}

nav {
    /* display: flex; */
    /* align-items: center; */
    margin: 0px 56px;
    font: 19px Arial, Helvetica, sans-serif;

}

a {
    padding: 0 38px;
    width: 71px;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    opacity: 0.9;
    color: black;

}

a:hover {
    opacity: 1;
    color: #608bd2;
}

.active {
    color: #608bd2;
    pointer-events: none;
    opacity: 1;
}

/*搜索框*/

.text {
    height: 22px;
    font-size: 14px;
    border: 1px solid #ccc;
    padding: 3px 16px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.text:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.button {
    width: 60px;
    height: 30px;
    font-size: 14px;
    margin-right: 35px;
    border: 1px solid #608bd2;
    background-color: #608bd2;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.contents {
    display: flex;
    justify-content: center;
}</style>
